<template>
	<view class="content">
		<view class="form-content">
			<view class="title">欢迎注册</view>
			<u-form :model="form" ref="uForm" label-width="120">
				<u-form-item prop="name" >
					<u-input v-model="form.name" placeholder="请输入用户名" placeholder-style="color:#636363"/>
				</u-form-item>
				<u-form-item prop="password">
					<u-input type="password" v-model="form.password" placeholder="请输入密码" placeholder-style="color:#636363" />
				</u-form-item>
				
				<u-form-item prop="repassword">
					<u-input v-model="form.repassword" type="password" placeholder="请再次确认密码" placeholder-style="color:#636363" />
				</u-form-item>
				<u-form-item>
					<u-radio-group v-model="value">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
	 
				</u-form-item>
				<!-- <u-input type="checkbox" v-model="kdisabled" @change="check"> -->
				<!-- <u-radio-group v-model="" @change="check">
					<u-radio shape="square" >同意好游相关条款</u-radio>
				</u-radio-group> -->
				<!-- <span :class="[kdisabled?'ckb_s':'ckb']" @click="check)"></span> -->
			</u-form>
			
			<button @click="submit" style="background-color: #0285ff;color: #FFFFFF;height: 80rpx;border-radius: 50rpx;line-height: 80rpx;font-size: 30rpx;">注册</button>
			
			<view class="u-m-t-20">
				<span :class="[kdisabled?'ckb_s':'ckb']" @click="check"></span>
				<text>同意猪猪旅游条款</text>
			</view>	
			<!-- <u-toast ref="uToast" /> -->
		</view>
		
	</view>
    
	<u-toast ref="uToast" />
</template>

<script>
    export default {
        data() {
            return {
				kdisabled:false,
                form: {
                    name: '',
                    password: '',
                    repassword: null,
					mobile:""
                },
				list: [{
						name: '男',
						disabled: false //不禁用所有单选框
					},
					{
						name: '女',
						disabled: false
					},
				],
				value: '男',
                rules: {
                    name: [{
                        required: true,
                        message: '请输入用户名',
                        // 可以单个或者同时写两个触发验证方式
                        trigger: 'blur'
                    }
					],
                    password: [{
                        required: true,
                        min: 3,
                        max: 8,
                        message: '长度在3-8个字符之间',
                        trigger: 'blur'
                    },
					// 正则判断为字母或数字
					{
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字'
					}
					],
                    repassword: [{
						required: true,
						message: '请输入密码',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					},{
						trigger: 'blur',
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'))
							} else {
								callback()
							}
						}
					}
                    ]
                }
            };
        },
        methods: {
			check(){
				this.kdisabled=!this.kdisabled
			},
			
            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
						
						
						if(this.kdisabled){
							uni.showModal({
							title: '现在正在跳转登录',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateTo({
										url: '/pages/mine/login/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
						}else{
							
							this.$refs.uToast.show({
								title: '请阅读并选择条款',
								type: 'error',
							})
							
						}
						
                    } else {
                        console.log('验证失败');
                    }
					
                });
            }
			
        },
        // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        }
    };
</script>

<style scoped lang="scss">
	.ckb{
	    width: 1.1rem;/* rem相对浏览器字体大小 */
	    height: 1.1rem;
	    border-radius: 50%;
	    border: 1px solid #B8B4B4;
	    display: inline-block;/* 占行，使可以设置大小 */
	    cursor: pointer;
	    vertical-align: text-bottom;/* 对齐文字底部 */
	}
	.ckb_s{
	    width: 1.1rem;
	    height: 1.1rem;
	    border-radius: 50%;
	    display: inline-block;
	    cursor: pointer;
	    background: url(../../../static/1.webp) no-repeat 0 0;/* no-repeat使图片不重复 */
	    background-size: 1.1rem;
	    border: 0;
	    vertical-align: text-bottom;
	}
	
	.content{
		padding: 30px;
		background: url(../../../static/VCG211248320154-MDG.jpg) no-repeat;
		background-size: 100% 1180rpx;
		width: 100%;
		height: 1180rpx;
		opacity: 1.8;
	}
    .form-content {
		padding: 50rpx;
		background-color: rgba($color: #ffffff, $alpha: 0.8);
		border-radius: 20rpx;
    }
	.title {
		text-align: left;
		font-size: 50rpx;
		font-weight: 500;
		margin-bottom: 100rpx;
	}
</style>
